<template>
    <div>        
        <div style="position: relative;z-index: 1;">
            <heade-return :title-params="name"></heade-return>
              <div class="shear-tittle" >
                   <span :class="flagg=== '1'  ?  'shear-sign' : '' " @click="changee()">我的收藏</span>
                   <span :class="flagg=== '2'  ?  'shear-sign' : ''" @click="changeeflag()">热门收藏</span>
              </div>
            <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
               >
                 <ul class="shear-content" v-if="flagg == 1 && collectList.length>0">
                    <li v-for="val in collectList" @click="proCli(val.productId)">
                        <div class="sheat-list-tittle">
                            <img :src="val.tbMnMaterialOptional.pictUrl" alt="">
                            <div class="sheat-list-tittle-right">
                                <div class="sheat-list-tittle-name">
                                    <p class="overgadre"><span >天猫 </span>&nbsp&nbsp{{val.tbMnMaterialOptional.title}}</p>
                                </div>
                                <div class="sheat-list-price">¥{{(val.tbMnMaterialOptional.zkFinalPrice-val.tbMnMaterialOptional.couponAmount).toFixed(1)}}<div class="sheat-list-youhui">券</div><div class="jiantou"></div><div class="sheat-list-youhui-right"><span>￥{{val.tbMnMaterialOptional.couponAmount}}</span></div></div>
                                <div class="heat-list-tittle-bottom">分享赚 {{((val.tbMnMaterialOptional.zkFinalPrice-val.tbMnMaterialOptional.couponAmount)*(val.tbMnMaterialOptional.commissionRate)*ownRate/10000).toFixed(2)}} 元
                                     <!-- <span>33人分享</span> -->
                                  </div>
                            </div>
                        </div>
                         <div class="sheat-list-tittle-btn">
                             <div @click="deletedetai(val.tbMnMaterialOptional.numIid)" style="width: 60px;float: left"><img src="../../assets/img/common-icon-delete@2x.png" alt="">&nbsp删除</div>
                             <ul class="sheat-list-btn" style="float: right">
                                 <li @click.stop="shopCli(val.tbMnMaterialOptional.productId)">购买</li>
                                 <!-- <li @click.stop="suggestlist()">推荐</li> -->
                                 <li @click.stop="shareDetail(val)">分享</li>
                             </ul>
                         </div>
                    </li>
                 </ul>
                 <ul class="shear-content" v-if="flagg == 2 && collectHotList.length>0">
                  <li v-for="val in collectHotList" @click="proCli(val.productId)">
                      <div class="sheat-list-tittle">
                          <img :src="val.tbMnMaterialOptional.pictUrl" alt="">
                          <div class="sheat-list-tittle-right">
                              <div class="sheat-list-tittle-name">
                                  <p class="overgadre"><span >天猫 </span>&nbsp&nbsp{{val.tbMnMaterialOptional.title}}</p>
                              </div>
                              <div class="sheat-list-price">¥{{(val.tbMnMaterialOptional.zkFinalPrice-val.tbMnMaterialOptional.couponAmount).toFixed(1)}}<div class="sheat-list-youhui">券</div><div class="jiantou"></div><div class="sheat-list-youhui-right"><span>￥{{val.tbMnMaterialOptional.couponAmount}}</span></div></div>
                              <div class="heat-list-tittle-bottom">分享赚 {{((val.tbMnMaterialOptional.zkFinalPrice-val.tbMnMaterialOptional.couponAmount)*(val.tbMnMaterialOptional.commissionRate)*ownRate/10000).toFixed(2)}} 元
                                   <!-- <span>33人分享</span> -->
                                </div>
                          </div>
                      </div>
                       <div class="sheat-list-tittle-btn">
                           <ul class="sheat-list-btn" style="float: right">
                               <li @click.stop="shopCli(val.tbMnMaterialOptional.productId)">购买</li>
                               <!-- <li @click.stop="suggestlist()">推荐</li> -->
                               <li @click.stop="shareDetail(val)">分享</li>
                           </ul>
                       </div>
                  </li>
               </ul>
                 
            </van-list>
      
           <!-- <div style="position: relative;z-index: 20">
            <van-overlay :show="suggest"  >
                <div class="wrapper" @click.stop>
                    <div class="new-personth" >
                        <p>提示</p>
                        <div class="content-contentth">
                            <div class="content-contentth-rigth">首页</div>
                            <div class="content-contentth-rigthth" >
                                <p>100积分</p>
                                <p>需要审核，有效期一周</p>
                            </div>
                            <van-checkbox style="display: inline-block;float: right;margin-top: 30px" icon-size="15px" v-model="checked" checked-color="#FF2E67"></van-checkbox>
                        </div>
                        <div class="content-contentth">
                            <div class="content-contentth-rigth-ov" style="padding: 8px;color: #2EA3FF;background: #e7f3fc">美团<br>分类</div>
                            <div class="content-contentth-rigthth" >
                                <p>100积分</p>
                                <p>需要审核，有效期一周</p>
                            </div>
                            <van-checkbox style="display: inline-block;float: right;margin-top: 30px" icon-size="15px" v-model="checkedd" checked-color="#FF2E67"></van-checkbox>
                        </div>
                        <div class="content-contentth" >
                            <div class="content-contentth-rigth-ov" style="padding: 8px;color: #FF922E;background: #fcebf2">辣味<br>频道</div>
                            <div class="content-contentth-rigthth" >
                                <p>100积分</p>
                                <p>需要审核，有效期一周</p>
                            </div>
                            <van-checkbox style="display: inline-block;float: right;margin-top: 30px" icon-size="15px" v-model="checkeddd" checked-color="#FF2E67"></van-checkbox>
                        </div>
                        <div class="share-btn">
                             <div class="share-btn-left" @click="suggestclose">
                                   取消
                             </div>
                            <div class="share-btn-right" @click="suggestsure">
                                  确认
                            </div>
                        </div>
      
                    </div>
                </div>
            </van-overlay>
           </div> -->
        </div>
        <div v-if="showDetail" style="position: absolute;top:0;z-index: 1000;width: 100%;">
            <detailsPage @getShow="getShow" :tranmitId="proId" :typeShop="typeShop"></detailsPage>
        </div>
        <div v-if="creatShareShow" style="position: absolute;top:0;z-index: 1000;width: 100%;">
            <creatShare :numId="numId" @returnPage="returnCurrentPage"></creatShare>
        </div>
    </div>
</template>

<script>
    import detailsPage from './detailsPage.vue';
    import creatShare from '../creatShare.vue';
    import headeReturn from "./head"
    import { List,Toast } from 'vant';
    export default {
        components:{
            headeReturn:headeReturn,
            detailsPage,
           [List.name]:List,
           creatShare
        },
        name: "sharePage",
        data(){
            return{
                name: "选品",
                showDetail:false,
                numId:'',
                creatShareShow:false,
                typeShop:'taobao',
                proId:'',
                loading: false,
                finished: false,
                list:[],
                suggest:false,
                flagg:"1",
                flag:false,
                checked:false,
                checkedd:false,
                checkeddd:false,
                userId:'',
                collectList:[],
                collectHotList:[],
                num:0,
                total:0,
                ownRate:0.6
            }

        },
        mounted() {
            this.userId = localStorage.getItem('user_id');
            this.$http.post(this.utils.config+"/netmall/app/person/api/getPersonCenterData?user_id="+this.userId).then((data) => {
                this.ownRate = data.data.result.tbMnUser.ownRate/100;
            })
            // this.initData();
        },
        watch: {
            flagg(val){
                this.num = 0;
                this.total=0;
                this.collectList = [];
                this.collectHotList = [];
                this.onLoad();
            }
        },
        methods:{
            returnCurrentPage(data){
                this.creatShareShow = data;
            },
            //跳转到淘宝
            shopCli(id){
                // this.testApp(url);
                // window.open("taobao:"+url);
                this.$http.get(this.utils.config + "/netmall/app/taobao/api/app/detail/openskipProductDetail?user_id="+this.userId+"&numIid="+id).then((data) => {
                    if (data.data.success) {
                        window.open("taobao:"+data.data.result.couponShareUrl);
                    }
                })
            },
            testApp(url) { 
                if(plus.os.name == "Android") {
                    plus.runtime.launchApplication({
                        // pname: "com.taobao.taobao",  // 这个有问题吗？
                        // extra: {
                        //     url: $(paramUrl).attr("url")// 这个有问题吗？
                        // }
                        action: "taobao:"+url
                    }, function(e) {
                        window.location.href = "http://android.taobao.com/";
                    });
                } else if(plus.os.name == "iOS") {
                    plus.runtime.launchApplication({
                        action: "taobao:"+url
                    }, function(e) {
                        window.location.href = "http://android.taobao.com/";
                    });
                } 
            },
            //点击商品
            proCli(val){
                this.proId = val;
                this.showDetail = true;
            },
            //商品详情
            getShow(data){
                this.showDetail = data;
            },
            //分享
            shareDetail(val){
                this.numId = val.tbMnMaterialOptional.numIid;
                this.creatShareShow = true;
                // localStorage.setItem('shareDetail',JSON.stringify(val));
                // this.$router.push('/shareProPage/'+val.tbMnMaterialOptional.numIid);
            },
            deletedetai(val){
               this.$http.post(this.utils.config + "/netmall/app/person/api/productCollect?userId="+this.userId+"&productId="+val).then((data) => {
                    if (data.data.success) {
                        Toast(data.data.message);
                        this.collectList = [];
                        this.collectHotList = [];
                        this.num = 0;
                        this.total = 0;
                        this.onLoad();
                    }
                })
            },
            changee(){
                this.flagg='1';
                this.initData();
            },
            changeeflag(){
                this.flagg = '2';
                // this.collectHot();
            },
            suggestlist(){
                this.suggest=true
            },
            suggestclose(){
                this.suggest=false
            },
            suggestsure(){

            },

            onLoad() {
                // 异步更新数据
                // setTimeout 仅做示例，真实场景中一般为 ajax 请求
                // setTimeout(() => {
                //     for (let i = 0; i < 10; i++) {
                //         this.list.push(this.list.length + 1);
                //     }

                //     // 加载状态结束
                //     this.loading = false;

                //     // 数据全部加载完成
                //     if (this.list.length >= 40) {
                //         this.finished = true;
                //     }
                // }, 1000);

                var that = this;
                that.num++;
                if(that.flagg == '1'){
                    that.$http.post(that.utils.config +"/netmall/app/person/api/getMyProductCollectAll?user_id="+this.userId+"&pageNo="+that.num+"&pageSize=10").then((data) => {
                        if (data.data.success) {
                            this.total = data.data.result.total;
                            for(let i=0;i<data.data.result.records.length;i++){
                                that.collectList.push(data.data.result.records[i]);
                                this.loading = false;
                            }
                            if(that.total == that.collectList.length){
                                that.finished = true;
                            }
                        }
                    })
                }
                if(that.flagg == '2'){
                    that.$http.post(that.utils.config +"/netmall/app/person/api/getProductCollectAll?pageNo="+that.num+"&pageSize=10").then((data) => {
                        if (data.data.success) {
                            this.total = data.data.result.total;
                            for(let i=0;i<data.data.result.records.length;i++){
                                that.collectHotList.push(data.data.result.records[i]);
                                this.loading = false;
                            }
                            if(that.total == that.collectHotList.length){
                                that.finished = true;
                            }
                        }
                    })
                }
            },
        },

    }
</script>

<style scoped>

 .shear-tittle{
     display: flex;
     justify-content: space-around;
     height: 40px;
     width: 100%;
     background:rgba(255,255,255,1);
     font-size:16px;
     font-family:SourceHanSansSC-Regular,SourceHanSansSC;
     font-weight:400;
     color:rgba(51,51,51,1);
     line-height:40px;

 }
    .shear-sign{
        color:rgba(255,12,78,1);
        position: relative;
    }
   .shear-sign:before{
       content: "";
       position: absolute;
       bottom: 0;
       left: 20%;
       width:41px;
       height:2px;
       background:rgba(255,12,78,1);
  }
    .shear-content{
        background:rgba(237,237,237,1);
        min-height: 90vh;
        width: 100%;
        padding: 0 10px 10px 10px;
        overflow: hidden;
    }
 .shear-content li{
     margin-top: 10px;
     width: 100%;
     height:190px;
     background:rgba(255,255,255,1);
     border-radius:9px;
 }
 .sheat-list-tittle{
     padding: 16px 16px 0 16px;
     height: 130px;
     width: 100%;
     margin: auto;
 }
    .sheat-list-tittle img{
        display: inline-block;
        width: 112px;
        height: 112px;
        background:rgba(216,216,216,1);
        border-radius:9px;
        float: left;
    }
    .sheat-list-tittle-right{
        float: left;
        height: 112px;
        text-align: center;
        margin-left: 10px;
        width: 54%;
    }
 .sheat-list-tittle-name {
     padding-top: 4px;
      height: 42px;
      font-size:12px;
      font-family:SourceHanSansSC-Bold,SourceHanSansSC;
      font-weight:bold;
      color:rgba(51,51,51,1);
      line-height:18px;

 }
 .sheat-list-tittle-name p{
     text-align: left;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     overflow: hidden;
 }
 .sheat-list-tittle-name p span{
     text-align: center;
     display: inline-block;
     width:30px;
     height:15px;
     background:rgba(255,46,103,1);
     border-radius:4px;
     font-size:10px;
     font-family:SourceHanSansSC-Regular,SourceHanSansSC;
     font-weight:400;
     color:rgba(255,255,255,1);
     line-height:15px;

 }
    .sheat-list-price{
        margin-top: 5px;
        text-align: left;
        font-size:20px;
        font-family:DIN-Medium,DIN;
        font-weight:500;
        color:rgba(255,46,103,1);
        line-height:24px;
        position: relative;
    }
    .sheat-list-youhui{
        text-align: center;
        width:21px;
        border-width:0 37px 100px 37px;
        height:15px;
        background:rgba(255,46,103,1);
        border-radius:2px 0px 0px 2px;
        font-size:10px;
        font-family:SourceHanSansSC-Regular,SourceHanSansSC;
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height:15px;
        position: absolute;
        left: 64px;
        top:5px

    }
 .sheat-list-youhui-right{
     text-align: center;
     width:56px;
     border-width:0 37px 100px 37px;
     height:15px;
     background: rgb(255, 229, 252);
     border-radius:2px 0px 0px 2px;
     font-size:10px;
     font-family:SourceHanSansSC-Regular,SourceHanSansSC;
     font-weight:400;
     /*color:rgba(255,46,103,1);*/
     line-height:15px;
     position: absolute;
     left: 85px;
     top:5px;
     z-index: 2;
 }
 .sheat-list-youhui-right span{
     color: rgba(255,46,103,1);
 }
    .jiantou{
        position: absolute;
        left: 85px;
        top:5px;
        width: 0;
        height: 0;
        border-top: 6px rgba(255,46,103,1) solid ;
        border-right:  4px transparent solid ;
        border-left:4px rgba(255,46,103,1) solid;
        border-bottom: 8px transparent solid;
        z-index: 10;
    }
    .heat-list-tittle-bottom{
        width:100%;
        text-align: left;
        margin-top: 17px;
        font-size:12px;
        font-family:SourceHanSansSC-Regular,SourceHanSansSC;
        font-weight:400;
        color:rgba(233,167,141,1);
        line-height:18px;
    }
    .heat-list-tittle-bottom span{
        display: inline-block;
        text-align: right;
        float: right;
        font-size:12px;
        font-family:SourceHanSansSC-Regular,SourceHanSansSC;
        font-weight:400;
        color:rgba(153,153,153,1);
        line-height:18px;
    }
    .sheat-list-tittle-btn{
        margin-top: 24px;
        height: 30px;
        padding: 0 10px;
        font-size:12px;
        font-family:SourceHanSansSC-Regular,SourceHanSansSC;
        font-weight:400;
        color:rgba(166,166,166,1);
        line-height:24px;
        position: relative;
    }
  .sheat-list-tittle-btn img{
      margin-top: 2px;
     width: 19px;
     height: 19px;

 }
 .sheat-list-btn{
     float: right;

 }
 .sheat-list-btn li{
        margin-top: 0;
        width:60px;
        height:24px;
        border-radius:15px;
        border:1px solid rgba(153,153,153,1);
        margin-left: 10px;
        float: right;
        text-align: center;
     font-size:12px;
     font-family:SourceHanSansSC-Regular,SourceHanSansSC;
     font-weight:400;
     color:rgba(153,153,153,1);
     line-height:24px;
    }
 .sheat-list-btn li:nth-child(1){
     border:1px solid rgba(255,46,103,1);
     color: rgba(255,46,103,1);
 }
 .wrapper {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;
     z-index: 999;
 }
    .new-personth{
        width:285px;
        height:396px;
        background:rgba(255,255,255,1);
        border-radius:6px;
        text-align: center;
        padding: 0 23px;
    }
 .new-personth p{
     margin-top: 16px;
     font-size:18px;
     font-family:SourceHanSansSC-Regular,SourceHanSansSC;
     font-weight:400;
     color:rgba(51,51,51,1);
     line-height:27px;
 }
    .content-contentth{
        height: 83px;
        width: 100%;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }
 .content-contentth-rigth{
     margin-top: 18px;
     float: left;
     width:47px;
     height:41px;
     background: rgb(255, 229, 252);
     border-radius:6px;
     text-align: center;
     font-size:12px;
     font-family:SourceHanSansSC-Regular,SourceHanSansSC;
     font-weight:400;
     color:rgba(255,46,103,1);
     line-height:41px;
 }
 .content-contentth-rigth-ov{
     margin-top: 18px;
     float: left;
     width:47px;
     height:41px;
     background: rgb(255, 229, 252);
     border-radius:6px;
     text-align: center;
     font-size:12px;
     font-family:SourceHanSansSC-Regular,SourceHanSansSC;
     font-weight:400;
     color:rgba(255,46,103,1);
     line-height:14px;
 }
 .content-contentth-rigthth{
     margin-left: 8px;
     padding-top: 18px;
     float: left;
     width: 128px;
     text-align: left;

 }
    .content-contentth-rigthth p{
        margin-top: 0;
        font-size:16px;
        font-family:SourceHanSansSC-Regular,SourceHanSansSC;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height:16px;
        margin-bottom: 5px;
    }
 .content-contentth-rigthth p:nth-child(2){
     font-size:12px;
     font-family:SourceHanSansSC-Regular,SourceHanSansSC;
     font-weight:400;
     color:rgba(136,136,136,1);
     line-height:18px;

 }
    .share-btn{
        margin-top: 48px;
    }
    .share-btn-left{
        width:110px;
        height:38px;
        background:rgba(237,237,237,1);
        border-radius:19px;
        font-size:16px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(102,102,102,1);
        line-height:38px;
        float: left;
    }
 .share-btn-right{
     width:110px;
     height:38px;
     background:rgba(255,46,103,1);
     border-radius:19px;
     font-size:16px;
     font-family:PingFangSC-Regular,PingFang SC;
     font-weight:400;
     color:rgba(255,255,255,1);
     line-height:38px;
     float: right;
 }

</style>
